<!--
 * @Author: fishroom
 * @Date: 2021-09-14 02:08:40
 * @LastEditTime: 2022-04-14 23:37:40
 * @FilePath: \website\src\views\home\Home.vue
-->
<template>
  <div class="home">
    <Loading />
    <!-- <Header :opacity="isShow" />
    <main class="index-container wrap">
      <Canvas />
      <Banner ref="indexImg" />
      <div class="index-list wrap"></div>
    </main> -->
  </div>
</template>

<script>
import Loading from "@/components/common/loading/Loading";

import { ref, onMounted, defineComponent } from "vue";
export default defineComponent({
  name: "Home",
  components: { Loading },
  setup() {
    let isShow = ref(false);

    // 获得canvas高度
    const indexImg = ref(null);
    // 在mounted监听页面滚动事件
    onMounted(() => {
      window.onscroll = function () {
        // 页面滚动的高度
        let scrollTop = document.documentElement.scrollTop;
        // 首页图片的高度
        let scrollHeight = indexImg.value.$el.scrollHeight;
        if (scrollTop > scrollHeight) {
          isShow.value = true;
        } else {
          isShow.value = false;
        }
      };
    });
    return {
      isShow,
      indexImg,
    };
  },
});
</script>

<style lang="stylus">
@import '../../style/content/home/home.styl';
</style>
